<html data-framework="angularjs">
<head>
  <title>AngularJS Internalization</title>
  <link rel="stylesheet" href="http://www.tutorialspoint.com/angularjs/src/todo/node_modules/todomvc-common/base.css">
  <link rel="stylesheet" href="http://www.tutorialspoint.com/angularjs/src/todo/node_modules/todomvc-app-css/index.css">
</head>
<body ng-app="todomvc">
  <ng-view/>
  
  <script type="text/ng-template" id="todomvc-index.html">
    <section id="todoapp">
      <header id="header">
        <form id="todo-form" ng-submit="addTodo()">
          <input type="text" id="new-todo" ng-model="newTodo" ng-disabled="saving" placeholder="Enter Todo List" autofocus autocomplete="off">
        </form>
      </header>
      <section id="main" ng-show="todos.length" ng-cloak>
        <input type="text" id="toggle-all" ng-model="allChecked" ng-click="markAll(allChecked)">
        <label for="toggle-all">Mark all as complete</label>
        <ul id="todo-list">
          <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
            <div class="view">
              <input type="checkbox" class="toggle" ng-model="todo.completed" ng-change="toggleCompled(todo)">
              <label ng-dblclick="editTodo(todo)">{{ todo.title }}</label>
              <button class="destroy" ng-click="removeTodo(todo)"></button>
            </div>
            <form ng-submit="saveEdits(todo, 'submit')">
              <input type="text" class="edit" ng-trim="false" ng-model="todo.title" ng-escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo == editedTodo">
            </form>
          </li>
        </ul>
      </section>
      <footer id="footer" ng-show="todos.length" ng-cloak>
        <span id="todo-count"><strong>{{ remainingCount }}</strong>
          <ng-pluralize count="remaingCount" when="{one: 'item left', other: 'items left'}"></ng-pluralize>
        </span>
        <ul id="filters">
          <li><a ng-class="{selected: status == ''}" href="#/">All</a></li>
          <li><a ng-class="{selected: status == 'active'}" href="#/active">Active</a></li>
          <li><a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a></li>
        </ul>
        <button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed</button>
      </footer>
    </section>
  </script>
  <script src="node_modules/todomvc-common/base.js"></script>
  <script src="node_modules/angular/angular.min.js"></script>
  <script src="node_modules/angular-route/angular-route.min.js"></script>
  <script src="todo/app.js"></script>
  <script src="todo/controllers/todoCtrl.js"></script>
  <script src="todo/services/todoStorage.js"></script>
  <script src="todo/directives/todoFocus.js"></script>
  <script src="todo/directives/todoEscape.js"></script>
</body>
</html>